<template>
<div class="app-container">
    <div style="float:right;width:65%;margin-top:7px;z-index:10000" class="filter-container">
        <div class="block">
          <!-- <span class="demonstration">默认</span> -->
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="——"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="float:left;width:35%">
          </el-date-picker>
        </div>
        <el-input
        v-model="shipAds"
        size="small"
        placeholder="输入提货网点搜索"
        style="width: 15%;margin-left:3%"
        class="filter-item"
        @keyup.enter.native="handleFilter"
        />
        <el-input
        v-model="orderName"
        size="small"
        placeholder="输入订单号搜索"
        style="width: 20%;margin-left:3%"
        class="filter-item"
        @keyup.enter.native="handleFilter"
        />
        <el-button
        size="small"
        class="filter-item"
        type="success"
        icon="el-icon-search"
        style="margin-left:3%"
        @click="handleFilter"
        >
        搜索
        </el-button>
    </div>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="全部订单" name="1">
      <eForm v-if="isChildUpdate1" ref="allList" v-bind:value1="value1" v-bind:shipAds="shipAds" v-bind:orderName="orderName" v-bind:allStatus="allStatus"/>
    </el-tab-pane>
    <el-tab-pane label="待付款" name="2">
      <eForm v-if="isChildUpdate2" ref="allList" v-bind:value1="value1" v-bind:shipAds="shipAds" v-bind:orderName="orderName" v-bind:allStatus="allStatus"/>
    </el-tab-pane>
    <el-tab-pane label="待发货" name="4">
      <eForm v-if="isChildUpdate4" ref="allList" v-bind:value1="value1" v-bind:shipAds="shipAds" v-bind:orderName="orderName" v-bind:allStatus="allStatus"/>
    </el-tab-pane>
    <el-tab-pane label="待收货" name="3">
      <eForm v-if="isChildUpdate3" ref="allList" v-bind:value1="value1" v-bind:shipAds="shipAds" v-bind:orderName="orderName" v-bind:allStatus="allStatus"/>
    </el-tab-pane>
    <el-tab-pane label="交易成功" name="5">
      <eForm v-if="isChildUpdate5" ref="allList" v-bind:value1="value1" v-bind:shipAds="shipAds" v-bind:orderName="orderName" v-bind:allStatus="allStatus"/>
    </el-tab-pane>
  </el-tabs>
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    /> -->
</div>
</template>
<script>
import eForm from './form'

  export default {
    // inject:["reload"],
    components: { eForm },
    data() {
      return {
        activeName: '1',
        value1: [],
        orderName:'',
        shipAds:'',
        allStatus:'',
        tabName:'',
        isChildUpdate1:true,
        isChildUpdate2:false,
        isChildUpdate3:false,
      };
    },
    created(){
      // this.getList()
    },
    methods: {
      handleClick(tab) {
        this.tabName=tab.name
        if(this.tabName=='1'){
          this.isChildUpdate1=true
          this.isChildUpdate2=false
          this.isChildUpdate3=false
          this.isChildUpdate4=false
          this.isChildUpdate5=false
          this.allStatus=''
          console.log(this.allStatus)
          this.$refs.allList.getList()
        }else if(this.tabName=='2'){
          this.isChildUpdate1=false
          this.isChildUpdate2=true
          this.isChildUpdate3=false
          this.isChildUpdate4=false
          this.isChildUpdate5=false
          this.allStatus='10'
          console.log(this.allStatus)
          this.$refs.allList.getList()
        }else if(this.tabName=='3'){
          this.isChildUpdate1=false
          this.isChildUpdate2=false
          this.isChildUpdate3=true
          this.isChildUpdate4=false
          this.isChildUpdate5=false
          this.allStatus='40'
          console.log(this.allStatus)
          this.$refs.allList.getList()
        }
        else if(this.tabName=='4'){
          this.isChildUpdate1=false
          this.isChildUpdate2=false
          this.isChildUpdate3=false
          this.isChildUpdate4=true
          this.isChildUpdate5=false
          this.allStatus='20'
          console.log(this.allStatus)
          this.$refs.allList.getList()
        }
        else if(this.tabName=='5'){
          this.isChildUpdate1=false
          this.isChildUpdate2=false
          this.isChildUpdate3=false
          this.isChildUpdate4=false
          this.isChildUpdate5=true
          this.allStatus='50'
          console.log(this.allStatus)
          this.$refs.allList.getList()
        }
      },
      handleFilter(){
        this.$refs.allList.getList()
      }
    }
  };
</script>
<style>
    .el-tabs__header{
        /* float: left; */
        width:35%
    }
</style>
